import { defineComponent, onMounted, onBeforeUnmount, ref, reactive, toRefs, computed } from 'vue'
import { parseTime } from '@/utils/index'
import ScaleView from '@/components/ScaleView/index.vue'
import logApi from '@/api/inwarehouse/log-api'
import goodsApi from '@/api/inwarehouse/goods-api'
import purchaseApi from '@/api/purchase/purchase-api'
import requirementApi from '@/api/purchase/requirement-api'
import * as echarts from "echarts";
import { useRouter } from 'vue-router'
import log from '../inwarehouse/log/log'
export default defineComponent({
  components: {
    ScaleView
  },
  setup() {
    const route = useRouter()
    let timer = null
    let timer2 = null

    const data = reactive({
      today: '',
      week: '',
      time: '',
      inLogList: [],
      outLogList: [],
      purchaseList: [],
      alertList: [],
      // totalFinish: [],
      totalUnFinish: []
    })

    const getDate = () => {
      timer = setInterval(() => {
        const date = new Date()
        data.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
        const tempDate = parseTime(date)
        data.today = tempDate.substring(0, 10)
        data.time = tempDate.substring(11, 19)
      }, 1000)
    }

    const getLogList = async () => {
      const outRes = await logApi.list({current: 1, size: 12, filter: {operate: '-1'} });
      const inRes = await logApi.list({current: 1, size: 12, filter: {operate: '1'} });
      data.outLogList = outRes.data.records;
      data.inLogList = inRes.data.records;
      console.log('data.inLogList',data.inLogList);
    }

    const getGoodsAlart = async () => {
      const res = await goodsApi.list({otherFilter: {alert: true}})
      data.alertList = res.data.records;
    }

    const getPurchaseApi = async () => {
      const res = await purchaseApi.list({otherFilter: {delay: true}})
      // console.log('getPurchaseApi',res);
      data.purchaseList = res.data.records
    }

    const getRequireList = async () => {
      const res = await requirementApi.clacAllRequire()
      // data.purchaseList = res.data.records
      // data.totalFinish = res.data.totalFinish;
      data.totalUnFinish = res.data.totalUnFinish;
    }

    const getSevenPurchase = async () => {
      const res = await purchaseApi.listCount()
      const data = res.data
      const xData = getXData()
      const yData = [data.one, data.two, data.three, data.fore,data.five, data.six, data.seven].reverse()
      initCharts(xData, yData)
    }

    const getXData = () => {
      const today = new Date();
      const arr = [];
      for(let i = 0; i < 7; i++) {
        const date = today.getTime() - i * 24 * 3600 * 1000;
        const m = new Date(date).getMonth() + 1;
        const d = new Date(date).getDate();
        const now = (m < 10 ? '0' + m : m)+ '-' + (d < 10 ? '0' + d : d);
        arr.push(now)
      }
      return arr.reverse()
    }

    const initCharts = (xData, yData) => {
      const myEChart= echarts.init(document.getElementById("barCharts"));
      const option = {
        // title: {
        //   text: '采购单',
        //   left: '40%',
        //   textStyle: {
        //     color: '#0FB5A7',
        //     fontWeight: 500
        //   }
        // },
        grid: {
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1D7EF2'
            }
          },
          data: xData,
        },
        yAxis: {
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1D7EF2'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: '#0FB5A7'
            },
            barWidth: '40%',
            data: yData,
          },
        ],
      };
      myEChart.setOption(option);
      // 根据页面大小自动响应图表大小
      // window.addEventListener("resize", function () {
      //   myEChart.resize();
      // })
    }

    const gotoProject = () => {
      route.push("/inwarehouse/project")
    }

    const gotoInventory = () => {
      route.push("/inwarehouse/inventory")
    }

    const gotolog = () => {
      route.push("/inwarehouse/log")
    }

    const toScreen =() =>{
      route.push("/screenMap")
    }

    const init = () => {
      getLogList()
      getGoodsAlart()
      getPurchaseApi()
      getRequireList()
      getSevenPurchase()
    }

    onMounted(() => {
      init()
      getDate()
      timer2 = setInterval(() => {
        init()
      }, 30000)
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
      clearInterval(timer2)
    })


    return {
      ...toRefs(data),
      getDate,
      gotoProject,
      gotoInventory,
      gotolog,
      toScreen
    }
  }
})
